<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: blue;

        }

        .box2 {
            width: 1000px;
            height: 1000px;
            background-image: url(./images/1.jpg);

            background-repeat: no-repeat;
            /* background-repeat: repeat-y; */
            /* background-repeat: repeat-x; */


            /* background-position: center; */
            /* background-position: left top; */
            /* background-position: right top; */
            /* background-position: left bottom; */
            /* background-position: right bottom; */
            /* background-position: top center; */
            /* background-position: bottom center; */
            background-position: 5% 50%;

            
            /* background-size: 400px 400px; */
            /* background-size: 100% 100%; */
            /* background-size: cover; */
            background-size: contain;
        }
    </style>
</head>

<body>
    <!-- 
    背景属性
    background-color: 背景颜色
    background-image: 背景图片

    background-repeat: 背景图片如何填充
        -repeat 默认值
        -repeat-x: 只向水平方向平铺
        -repeat-y: 只向垂直方向平铺
        -no-repeat: 不平铺

    background-position: 背景图片的位置
        -left top:左上角
        -right top:右上角
        -left bottom:左下角
        -left center:左中
        -right center: 右中
        -right bottom: 右下角
        -center center: 中中
        -top center: 上中
        -bottom center: 下中
        -x% y%:第一个是水平位置，第二个是垂直位置，左上是0%，0%，右下是100%，100%
               如果只指定一个值，其它值默认是50%，默认是0%，0%
        -px px: 像素

    background-size: 背景图片大小属性
        -length :设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只设置一个，第二个值auto
        -percentage :计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只设置一个，第二个值auto
        -cover :保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
        -contain :保持图片纵横比并将图片缩放成合适背景定位区域的最大大小
    -->

    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>